import React, {useEffect, useState} from 'react';
import {useNavigate, useParams} from "react-router-dom";
import {reqGetCourse} from "../../../../api/frontDesk/frontDeskApi";
import classes from './index.module.scss'
import {Button} from "antd";
import {PayCircleOutlined} from '@ant-design/icons';
import CourseItem from "../../../../component/frontDesk/CourseItem";
import LoginAlert from "../../../../component/LoginAlert";
import {getToken} from "../../../../utils/token";

const CourseContent = () => {

    const params = useParams()
    const [course, setCourse] = useState({})
    const [open, setOpen] = useState(false)

    useEffect(() => {
        getCourse()
    }, [])
    const getCourse = async (id) => {
        id = params.id
        const {course} = await reqGetCourse(id)
        setCourse(course)
    }

    const nav = useNavigate()
    const gotoBuyCourse = () => {
        if (getToken()) {
            nav(`/buy-course/${params.id}`)
        } else {
            setOpen(!open)
        }
    }
    return (
        <div className={classes.CourseContent}>
            <div>
                <CourseItem course={course}/>
                <Button type="primary" size={"large"} className={classes.BuyBtn}
                        icon={<PayCircleOutlined/>} onClick={gotoBuyCourse}>立即购买</Button>
                {open && <LoginAlert open={open}/>}
            </div>
        </div>
    );
};

export default CourseContent;